<template>
<div>
    <el-tree
    ref="treeRef"
    :data="list"
    show-checkbox
    node-key="roleId"
    :check-strictly="true"
    :default-checked-keys="authority"
    :props="{
        children: 'roleList',
        label: 'name',
    }"
  /><el-button @click="changeAuthority">确认修改</el-button>
  <!-- check-strictly="true"遵循父子互相关联 -->
  <!-- :default-checked-keys默认选中的 -->
</div>   
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getAuthorityList } from '@/request/api'
import { InitData } from '@/type/authority'
import { useRoute } from 'vue-router'

export default defineComponent({
    setup () {
        const route=useRoute()//获取传过来的数据
        // console.log(route);
        const params:any=route.params;//params此时不知道传过来的属性
        const data=reactive(new InitData(params.id,params.authority));
        onMounted(()=>{
            getAuthorityList().then(res=>{
                data.list=res.data
            })
        })
        const changeAuthority=()=>{
            console.log(data.treeRef.getCheckedKeys());
            console.log(data.treeRef.getCheckedKeys().sort(function(a:number,b:number){return a-b}));//传给后台，后台修改
            // getCheckedKeys()显示选中的状态 拿到的是乱序的数组
        }
        return {...toRefs(data),changeAuthority}
    }
})
</script>

<style scoped>

</style>